<template>
  <div class="base-icon">
    <svg
      v-if="props.type === 'svg' && props.src"
      class="icon"
      aria-hidden="true"
      :style="{ fontSize: `${props.size}px` }"
    >
      <use :xlink:href="`#${props.src}`"></use>
    </svg>
    <span
      v-if="props.type === 'iconfont' && props.src"
      class="iconfont"
      :class="props.src"
      :style="{ fontSize: `${props.size}px` }"
    ></span>
  </div>
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'svg'
  },
  size: {
    type: Number,
    default: 14
  }
})
</script>

<style scoped lang="scss">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
